<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">
          基础信息
          <a-button @click="fetchData">刷新</a-button>
        </div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="名称">
              {{ model.name }}
            </a-descriptions-item>
            <a-descriptions-item label="实验分类">
              {{ model.experiment_category_name }}
            </a-descriptions-item>
            <a-descriptions-item label="AI测评">
              {{ model.ai_enabled ? "支持" : "不支持" }}
            </a-descriptions-item>
            <a-descriptions-item label="数字孪生">
              {{ model.twin_abled ? "支持" : "不支持" }}
            </a-descriptions-item>
            <a-descriptions-item label="实验类型">
              {{ model.experiment_type_name }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">
          关联实验器材

          <a-button>添加新的 实验器材 (TODO)</a-button>
        </div>
        <div
          class="column-content"
          v-for="(item, index) in model.equipments"
          :key="index"
        >
          <a-descriptions
            bordered
            :labelStyle="{ width: '150px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <template #extra>
              <a-popconfirm
                title="确定删除此项吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delete_equipment(item)"
              >
                <a href="#">删除</a>
              </a-popconfirm>
            </template>
            <a-descriptions-item label="实验器材名称">
              {{ item.equipment?.name }}
            </a-descriptions-item>
            <a-descriptions-item label="数量">
              {{ item.amount }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">
          实验记录数据表
          <a-button>添加新的 实验记录数据表 (TODO)</a-button>
        </div>
        <div
          class="column-content"
          v-for="(item, index) in model.tables"
          :key="index"
        >
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="表格名称">
              {{ item.name }}
              <a-popconfirm
                title="确定删除此项吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delete_table(item)"
              >
                <a href="#">删除</a>
              </a-popconfirm>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">
          实验报告范文
          <a-button>添加新的 实验报告范文 (TODO)</a-button>
        </div>
        <div
          class="column-content"
          v-for="(item, index) in model.report_files"
          :key="index"
        >
          <a-button type="link" @click="previewFile(item)">
            {{ item.file_name }}
          </a-button>
          <a-popconfirm
            title="确定删除此项吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="delete_file(item)"
          >
            <a href="#">删除</a>
          </a-popconfirm>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">实验目的</div>
        <div class="column-content" v-html="model.objective"></div>
      </div>
      <div class="detail-column">
        <div class="column-title">实验原理</div>
        <div class="column-text" v-html="model.principle"></div>
      </div>
      <div class="detail-column">
        <div class="column-title">实验步骤</div>
        <div class="column-text" v-html="model.steps"></div>
      </div>
      <div class="detail-column">
        <div class="column-title">注意事项</div>
        <div class="column-text" v-html="model.notice"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import api from "@/api";
import type {
  Experiment_DataModel,
  Experiment_equipment_DataModel,
  Experiment_report_file_DataModel,
  Experiment_table_DataModel,
  Report_file_DataModel,
} from "@/api/ApiClient";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const query = computed(() => route.query);
const experiment_id = ref();
const model = ref<Experiment_DataModel>({});
const fetchData = () => {
  api
    .apiExperimentFetchModelPost({ experiment_id: experiment_id.value })
    .then((res) => (model.value = res.data ?? {}));
};
onMounted(() => {
  experiment_id.value = query.value.id;
  console.log("experiment_id", experiment_id.value);
  fetchData();
});

const previewFile = (item: Report_file_DataModel) => {
  console.log(item.url);
  if (item.url) {
    window.open(item.url);
  }
};
const delete_equipment = async (item: Experiment_equipment_DataModel) => {
  await api.apiExperimentEquipmentDeletePost(item);
  message.success({ content: "操作完毕" });
  fetchData();
};
const delete_table = async (item: Experiment_table_DataModel) => {
  await api.apiExperimentTableDeletePost(item);
  message.success({ content: "操作完毕" });
  fetchData();
};
const delete_file = async (item: Experiment_report_file_DataModel) => {
  await api.apiExperimentReportFileDeletePost(item);
  message.success({ content: "操作完毕" });
  fetchData();
};
</script>
